<!-- 
    Copyright (C)  2011  chen wei hua.
    Permission is granted to copy, distribute and/or modify this document
    under the terms of the GNU Free Documentation License, Version 2.0
    or any later version published by the Free Software Foundation;
    with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts.
    A copy of the license is included in the section entitled "GNU Free Documentation License".
 -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../../common/jsp/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仓库管理-添加在库品</title>
<%@ include file="../../common/jsp/config.jsp"%>
<%@ include file="../../common/jsp/validate.jsp"%>
<script type="text/javascript" src="common/js/jquery/chinaArea/jquery.fillOptions.js"></script>
<script type="text/javascript">
	var skuConfigRowIndex = 0;
	$(document).ready(function() {
		$("#saveMaterials").validate({
			submitHandler: function(form) {
				form.submit();
				self.returnValue = DIALOG_RESULT_TYPE_SUCCESS;
				self.close();
				return false;
			}
		});
		
		$("#root_category").bind("change", function() {
			var parentId = $(this).val();
			$("#mid_category").fillOptions(
					"queryMaterialsCategoryJOSN.action?categoryId=" + parentId,
					{datatype:"json",text:"name",value:"id",jsonData:"categoryList"});
		});

		$("#mid_category").bind("change", function() {
			var parentId = $(this).val();
			$("#child_category").fillOptions(
					"queryMaterialsCategoryJOSN.action?categoryId=" + parentId,
					{datatype:"json",text:"name",value:"name",jsonData:"categoryList"});
		});

		$("#supplierFileCheckDiv").bind("click", function(e) {
			var checkBox = $(e.target);
			var value = checkBox.val();
			var status = checkBox.attr("checked");
			var labelValue = checkBox.next().html();
			if (status) {
				var str = '<tr id="supplierFileCheck_' + value + '" class="odd">'
					+ '<td>' + labelValue + '</td>'
					+ '<td><input name="fileCustomValues" type="text" size="10" value="' + labelValue + '" onblur="reflashSupplierCombox()" />'
					+ '<input name="fileCustomIds" type="hidden" value="' + value + '" /></td></tr>';
				$("#supplierFileTable").append(str);
			} else {
				$("#supplierFileCheck_" + value).remove();
			}
	        initSKUConfigTable();
		});

		$("#customerFileCheckDiv").bind("click", function(e) {
			var checkBox = $(e.target);
			var value = checkBox.val();
			var status = checkBox.attr("checked");
			var labelValue = checkBox.next().html();
			if (status) {
				var str = '<tr id="customerFileCheck_' + value + '" class="odd">'
					+ '<td>' + labelValue + '</td>'
					+ '<td><input name="fileCustomValues" type="text" size="10" value="' + labelValue + '" onblur="reflashCustomerCombox()" />'
					+ '<input name="fileCustomIds" type="hidden" value="' + value + '" /></td></tr>';
				$("#customerFileTable").append(str);
			} else {
				$("#customerFileCheck_" + value).remove();
			}
			initSKUConfigTable();
		});

		$("#colorFileCheckDiv").bind("click", function(e) {
			var checkBox = $(e.target);
			var value = checkBox.val();
			var status = checkBox.attr("checked");
			var labelValue = checkBox.next().html();
			if (status) {
				var str = '<tr id="colorFileCheck_' + value + '" class="odd">'
				+ '<td>' + labelValue + '</td>'
				+ '<td><input name="fileCustomValues" type="text" size="10" value="' + labelValue + '" onblur="reflashColorCombox()" />'
				+ '<input name="fileCustomIds" type="hidden" value="' + value + '" /></td></tr>';
				$("#colorFileTable").append(str);
			} else {
				$("#colorFileCheck_" + value).remove();
			}
			initSKUConfigTable();
		});
	});

	function initCombox(id, fileds) {
		var combox = '<select id =' + id + '>';
		fileds.each(function(i) {
			if (i > 0) {
				var fileValue = $(this).find("input[type=text]").val();
				var value = $(this).find("input[type=hidden]").val();
				combox += '<option value="' + value + '">' + fileValue + '</option>';
			}
		});
		combox += '</select>';
		return combox;
	}

	function reflashSupplierCombox() {
		var combox = $("#combox_supplier");
		combox.empty();
		//$("#combox_supplier option").remove();
		var fileds = $("#supplierFileTable tr");
		fileds.each(function(i) {
			if (i > 0) {
				var fileValue = $(this).find("input[type=text]").val();
				var value = $(this).find("input[type=hidden]").val();
				combox.append('<option value="' + value + '">' + fileValue + '</option>');
			}
		});
	}

	function reflashCustomerCombox(id) {
		var combox = $("#combox_customer");
		combox.empty();
		var fileds = $("#customerFileTable tr");
		fileds.each(function(i) {
			if (i > 0) {
				var fileValue = $(this).find("input[type=text]").val();
				var value = $(this).find("input[type=hidden]").val();
				combox.append('<option value="' + value + '">' + fileValue + '</option>');
			}
		});
	}

	function reflashColorCombox(id) {
		var combox = $("#combox_color");
		combox.empty();
		var fileds = $("#colorFileTable tr");
		fileds.each(function(i) {
			if (i > 0) {
				var fileValue = $(this).find("input[type=text]").val();
				var value = $(this).find("input[type=hidden]").val();
				combox.append('<option value="' + value + '">' + fileValue + '</option>');
			}
		});
	}

	function addSkuConfigRow() {
		var skuConfigTable = $("#skuConfigTable");
		//var rowIndex = $("#skuConfigTable tr").length + 2;
		skuConfigRowIndex++;
		var str = '<tr class="odd">';

		var supplierCombox = $("#combox_supplier");
		if (supplierCombox.length > 0) {
			str += '<td>' + supplierCombox.find("option:selected").text() 
				+ '<input name="skuConfigSupplierIds" type="hidden" value="' + supplierCombox.val() + '" />'
				+ '<input name="skuConfigSupplierIdrows" type="hidden" value="' + skuConfigRowIndex + '" /></td>';
		}

		var customerCombox = $("#combox_customer");
		if (customerCombox.length > 0) {
			str += '<td>' + customerCombox.find("option:selected").text()
				+ '<input name="skuConfigCustomerIds" type="hidden" value="' + customerCombox.val() + '" />'
				+ '<input name="skuConfigCustomerIdrows" type="hidden" value="' + skuConfigRowIndex + '" /></td>';
		}

		var colorCombox = $("#combox_color");
		if (colorCombox.length > 0) {
			str += '<td>' + colorCombox.find("option:selected").text() 
				+ '<input name="skuConfigColorIds" type="hidden" value="' + colorCombox.val() + '" />'
				+ '<input name="skuConfigColorIdrows" type="hidden" value="' + skuConfigRowIndex + '" /></td>';
		}
		
		str += '<td><input type="button" value="删除" onclick="removeSkuConfigRow(this)" /><td>';
		str += '</tr>';
		skuConfigTable.append(str);
	}

	function removeSkuConfigRow(btn) {
		$(btn).parent().parent().remove();
	}

	function initSKUConfigTable() {
		var supplierFileTable = $("#supplierFileTable");
		var customerFileTable = $("#customerFileTable");
		var colorFileTable = $("#colorFileTable");
		var skuConfigTable = $("#skuConfigTable");
		skuConfigTable.empty();
		
		var skuTH = $('<tr class="ksglxx2bg" />');
		skuConfigTable.append(skuTH);
		var skuConfigTr = $('<tr class="odd" />');
		skuConfigTable.append(skuConfigTr);

		var supplierFileds = supplierFileTable.find("tr");
		if (supplierFileds.length > 1) {
			skuTH.append('<th width="95px" >厂商</th>');
			skuConfigTr.append('<td>' + initCombox("combox_supplier", supplierFileds) + '</td>');
		}
		
		var customerFileds = customerFileTable.find("tr");
		if (customerFileds.length > 1) {
			skuTH.append('<th width="95px" >客户</th>');
			skuConfigTr.append('<td>' + initCombox("combox_customer", customerFileds) + '</td>');
		}
		
		var colorFileds = colorFileTable.find("tr");
		if (colorFileds.length > 1) {
			skuTH.append('<th width="95px" >颜色</th>');
			skuConfigTr.append('<td>' + initCombox("combox_color", colorFileds) + '</td>');
		}
		skuTH.append('<th width="55px" >&nbsp;</th>');
		skuConfigTr.append('<td><input type="button" value="添加" onclick="addSkuConfigRow()" ></td>');
	}
	
	function btn_save() {
    	$("#saveMaterials").submit();
	}
	
	function btn_close() {
		self.close();
	}
</script>
</head>
<base target="_self">
<body>
    <div class="subnav" align="left">
           <table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tr>
			<td width="100%" align="left" height="31">&nbsp;<img src="common/images/title-pk.gif" border="0"  align="absmiddle"/>&nbsp;<span class="subnavtxt1">仓库管理</span>
			&nbsp;<img src="common/images/leftico2.gif" border="0"  align="absmiddle"/>&nbsp;<span class="subnavtxt2">添加在库品</span></td>
		  </tr>
		</table>
      </div>
     <s:actionerror cssStyle="color:red"/>
     <div class="main_1">
       <s:form action="saveMaterials">
       <s:if test="materials.id>0">
         <s:hidden name="materials.id"/>
       </s:if>
       <table width="100%" border="0" cellpadding="10" cellspacing="1" bgcolor="#D3DEEF">
         <tr>
           <td bgcolor="#FAFAFA"><table width="100%" border="0" cellpadding="5" cellspacing="1"  >
             <tr>
               <td class="gr-text1"><div align="right"><strong>大分类</strong></div></td>
               <td align="left">
	          	<s:select id="root_category"
	          	    list="rootCategoryList"
	          		listKey="id"
	          		listValue="name"
	          		headerKey="-1"
	          		headerValue="-请选择-"
	          		cssClass="{selected:true}"
	          		name="materials.rootCategory.id" />
                <span class="red-text1">*</span>
               </td>
             </tr>
             <tr>
               <td class="gr-text1"><div align="right"><strong>中分类</strong></div></td>
               <td align="left">
	          	<s:select id="mid_category"
	          	    list="categoryList"
	          		listKey="id"
	          		listValue="name"
	          		headerKey="-1"
	          		headerValue="-请选择-"
	          		cssClass="{selected:true}"
	          		name="materials.category.id" />
                <span class="red-text1">*</span>
               </td>
             </tr>
             <tr>
               <td class="gr-text1"><div align="right"><strong>名称</strong></div></td>
               <td align="left">
	          	<s:select id="child_category"
	          	    list="nameList"
	          		listKey="name"
	          		listValue="name"
	          		headerKey="-1"
	          		headerValue="-请选择-"
	          		cssClass="{selected:true}"
	          		name="materials.name" />
	          	 <span class="red-text1">*</span>
               </td>
             </tr>
             <tr>
               <td class="gr-text1"><div align="right"><strong>规格</strong></div></td>
               <td align="left">
	          	 <s:textfield name="materials.type" size="30" cssClass="{required:true,maxlength:30}" />
	          	 <span class="red-text1">*</span>
               </td>
             </tr>
			 <tr>
               <td class="gr-text1"><div align="right"><strong>单位</strong></div></td>
               <td align="left">
          	     <s:select name="materials.units"
          	        list="unitsList"
	          		listKey="value"
	          		listValue="value"
	          		headerKey="-1"
	          		headerValue="-请选择-"
          	 	    cssClass="{selected:true}" />
          	 	 <span class="red-text1">*</span>
               </td>
			 </tr>
             <tr>
               <td class="gr-text1" rowSpan="2"><div align="right"><strong>供应商</strong></div></td>
               <td align="left">
                <div id="supplierFileCheckDiv">
                 <s:checkboxlist name="supplierFileValues"
	          		list="supplierFileList"
	          		listKey="id"
	          		listValue="name" />
                </div>
               </td>
             </tr>
             <tr>
               <td align="left">
			 	 <div class="main_1">
			       <table cellpadding="0" cellspacing="1" border="0" class="ksglxx2a" id="supplierFileTable">
			        <tr class="ksglxx2bg">
			          <th width="95px" >供应商</th>
			          <th width="95px" >自定义名称</th>
					</tr>
				   </table>
				 </div>
               </td>
             </tr>
             <tr>
               <td class="gr-text1" rowSpan="2"><div align="right"><strong>客户</strong></div></td>
               <td align="left">
                <div id="customerFileCheckDiv">
                 <s:checkboxlist name="customerFileValues"
	          		list="customerFileList"
	          		listKey="id"
	          		listValue="name" />
                </div>
               </td>
             </tr>
             <tr>
               <td align="left">
			 	 <div class="main_1">
			       <table cellpadding="0" cellspacing="1" border="0" class="ksglxx2a" id="customerFileTable">
			        <tr class="ksglxx2bg">
			          <th width="95px" >客户</th>
			          <th width="95px" >自定义名称</th>
					</tr>
				   </table>
				 </div>
               </td>
             </tr>
             <tr>
               <td class="gr-text1" rowSpan="2"><div align="right"><strong>颜色</strong></div></td>
               <td align="left">
                <div id="colorFileCheckDiv">
                 <s:checkboxlist name="colorFileValues"
	          		list="colorFileList"
	          		listKey="id"
	          		listValue="name" />
                </div>
               </td>
             </tr>
             <tr>
               <td>
				 <div class="main_1" id="colorFileDiv">
			       <table cellpadding="0" cellspacing="1" border="0" class="ksglxx2a" id="colorFileTable">
			        <tr class="ksglxx2bg">
			          <th width="95px" >颜色</th>
			          <th width="95px" >自定义名称</th>
					</tr>
				   </table>
				 </div>
               </td>
             </tr>
             <tr>
               <td class="gr-text1"><div align="right"><strong>SKU设置</strong></div></td>
               <td>
				 <div class="main_1">
			       <table cellpadding="0" cellspacing="1" border="0" class="ksglxx2a" id="skuConfigTable">
			        <tr class="ksglxx2bg">
			          <th width="95px" >供应商</th>
			          <th width="95px" >客户</th>
			          <th width="95px" >颜色</th>
					</tr>
				   </table>
				 </div>
               </td>
             </tr>
			 <tr>
               <td class="gr-text1"><div align="right"><strong>其他描述</strong></div></td>
               <td align="left">
                 <s:textfield name="materials.property" size="30" cssClass="{maxlength:30}" />
               </td>
			 </tr>
             <tr>
               <td valign="top"></td>
               <td align="left"><input type="button" value="保存" class="input1" onclick="btn_save()"/>&nbsp;&nbsp;
               <input type="button" value="关闭" class="input1" onclick="btn_close()" /></td></td>
             </tr>
           </table></td>
         </tr>
       </table>
       </s:form>
     </div>
     <div class="clear"></div>
</body>
</base>
</html>
